﻿<%@ Page Language="C#"  Async="true" AutoEventWireup="true" CodeBehind="HomePage.aspx.cs" Inherits="speech.WebForm1" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Street Speak</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<link rel="shortcut icon" type="image/x-icon" href="CSS/favicon.ico">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="CSS/Microphone.css"/>
<link rel="stylesheet" href="CSS/CornersAndButtons.css"/>
<link rel="stylesheet" type="text/css" href="CSS/jquery.fancybox.css"  media="screen" />
<link rel="stylesheet" href="CSS/jquery.fancybox-buttons.css"/>

 <script type="text/javascript">

     function sendEmail() {

     
         var coOrd = panorama.getPosition();
         var pitch = panorama.getPov().pitch;
         var heading = panorama.getPov().heading;
         getTextBoxValue2 = document.getElementById("input").value.toLowerCase();

         if (getTextBoxValue2.indexOf("send") != -1) {

             //if the form is visible,then pass the lat and long values to the hidden text boxes
             //save your current location for when the page reloads
         //call the on click method for the invisible button through javascript.
                 if ($('#shareMap').is(":visible"))
                  {
                      document.getElementById("hiddenLat").value = coOrd.lat().toFixed(4);
                      document.getElementById("hiddenLng").value = coOrd.lng().toFixed(4);
                      localStorage.latPageReload = document.getElementById("hiddenLat").value;
                      localStorage.lngPageReload = document.getElementById("hiddenLng").value;
                     localStorage.pitchPageRelod = pitch;
                     localStorage.headingPageRelod = heading;
                   
                     document.getElementById('<%=Btn_SendMail.ClientID%>').click();
                   
                    
                 }
                 else 
                 {
                     $("#warningText").append("<strong>Warning:Please say \'Share\' first to bring up the form fields</strong>");
                     $("#Warning").show();
                     $("#Warning").show().delay(5000).fadeOut();

                 }
             }
         }
       
     
 </script>


</head>


  <body id="mybody" onload="initialize()">

    <div id="map_canvas" style="float:left;margin-left:75px;margin-right:20px;width:45%; height:500px;"></div>
    <div id="pano" style="width: 45%;height:500px"></div>
    <div id="container" style="text-align:center;background-image:url('CSS/background.png');background-repeat:no-repeat">
    <div id="dialog" title="Error Message"></div>

    <div id="title">
	<div id ="speechinput" style="display:inline" >
	<input id="input" type="text"  speech="speech" x-webkit-speech="x-webkit-speech" onclick="clear();" onwebkitspeechchange="append();sendEmail()"/>
    <div  style="display:inline;float:right"><asp:Image ImageUrl="~/CSS/helpIcon.png" id ="tooltip" runat="server" Height="30px" title="Speak 'Show Instructions' to bring up the list of commands available." /></div>
   
    </div> <br />
    
    <div id = "hideEmailConfirmation" style="display:block"></div>
    <div id ="MailSent" visible=false runat="server"><h3 style="color:Green;font-family:Cursive;display:inline">Email Successfully Sent</h3> <asp:Image ImageUrl="~/CSS/correct.jpg"  runat="server" 
              Height="21px" Width="31px" /></div>
   
    <div id ="shareMap" style="margin-left:auto;margin-right:auto;width:600px;display:none">
     <form id="Form1" runat="server">
   
   <fieldset id="field" class="corners">
   <legend>Share Map</legend>
         <input id="hiddenLat" type="hidden" runat="server" />
          <input id="hiddenLng" type="hidden" runat="server" />
       <html5:EmailInput ID="EmailInput1" class="corners" runat="server" PlaceHolderText="Please enter recipents email" Required=true Width="200px"> </html5:EmailInput><br /><br />
       <html5:TextInput ID="TextInput1" class="corners" runat="server" PlaceHolderText ="Enter your name" Required=true Width="200px"></html5:TextInput> <br /><br />
        <textarea id="TextArea1" cols="50" rows="10" class="corners" runat="server" placeholder ="Additional information in your e-mail"></textarea><br />
        <asp:Button  ID="Btn_SendMail" runat="server" onclick="Btn_SendMail_Click"  Text="Send Email" style="display:none"/><br />
       
       <br /> 
       </fieldset>
    </form>
    </div>
 <select name="lang" id="lang" onchange=" document.getElementById('input').setAttribute('lang', this.options[this.selectedIndex].value)">
    
    <option value="en">English</option>
    <option value="en-GB" selected=selected>English (Great Britain)</option>
    <option value="en-US">English (USA)</option>
    </select>
</div>
<div id ="position">

</div>
<div id ="headingCell">

</div>
<div id="Error" class="ui-widget" style="width:400px;margin-left:auto;margin-right:auto;display:none">
	<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
		<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
		<strong id ="check">Alert:</strong></p>
	</div>
    </div>
    <div id="Warning" class="ui-widget" style="width:400px;margin-left:auto;margin-right:auto;display:none">
	<div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
		<p ><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
		<strong id ="warningText" >Warning:</strong></p>
	</div>
   
</div>
 <div id="Success" class="ui-widget" style="width:400px;margin-left:auto;margin-right:auto;display:none">
	<div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
		<p style="color:Green"><span style="float: left; margin-right: .3em"></span>
		<strong id ="successText">Success:</strong></p>
	</div>
   
</div>

<div id="tool" style="margin-left:auto;margin-right:auto;display:none">
	<br/>
	<textarea rows="15" cols="94" id="textBox"></textarea>
   
</div>

<a class="fancybox" href ="#inline1"title="Street Speak Instruction Guide" onclick ="click()" style="display:none">Inline</a>

<div id="inline1" style="width:400px;display:none">
		<h3 style="text-align:center">List of Commands</h3>
            <div> <h4 style="text-align:left;display:inline">Show Instructions/Commands -</h4> <h5 style="display:inline;font-style:italic">Displays Instruction Screen</h5></div>
	        <div> <h4 style="text-align:left;display:inline">Pan Left -</h4> <h5 style="display:inline;font-style:italic">Look left without moving position</h5></div>
            <div> <h4 style="text-align:left;display:inline">Pan Right -</h4> <h5 style="display:inline;font-style:italic">Look right without moving position</h5></div>
            <div> <h4 style="text-align:left;display:inline">Look Up -</h4> <h5 style="display:inline;font-style:italic">Look up without moving position</h5></div>
            <div> <h4 style="text-align:left;display:inline">Turn Around -</h4> <h5 style="display:inline;font-style:italic">Turn around in the opposite direction</h5></div>
            <div> <h4 style="text-align:left;display:inline">Go Forward -</h4> <h5 style="display:inline;font-style:italic">Move forward to the next panorama</h5></div>
            <div> <h4 style="text-align:left;display:inline">Go Back -</h4> <h5 style="display:inline;font-style:italic">Move back to the previous panorama</h5></div>
            <div> <h4 style="text-align:left;display:inline">Turn Left -</h4> <h5 style="display:inline;font-style:italic">Turn Left to the next panorama</h5></div>
            <div> <h4 style="text-align:left;display:inline">Turn Right -</h4> <h5 style="display:inline;font-style:italic">Turn Right to the next panorama</h5></div>
            <div> <h4 style="text-align:left;display:inline">Go To (city name) -</h4> <h5 style="display:inline;font-style:italic">Re-directs to the chosen city</h5></div>
            <div> <h4 style="text-align:left;display:inline">Zoom In/Map -</h4> <h5 style="display:inline;font-style:italic">Zoom in on the street view or roadmap</h5></div>
            <div> <h4 style="text-align:left;display:inline">Zoom Out/Map -</h4> <h5 style="display:inline;font-style:italic">Zoom out on the street view or roadmap</h5></div>
            <div> <h4 style="text-align:left;display:inline">Find Resteraunts/Stores/Churches/Cafes -</h4> <h5 style="display:inline;font-style:italic">Finds outlets on the roadmap within 500m of your location</h5></div>
            <div> <h4 style="text-align:left;display:inline">Show/Remove Weather -</h4> <h5 style="display:inline;font-style:italic">Displays/Removes weather in whatever location you are in</h5></div>
            <div> <h4 style="text-align:left;display:inline">Save/Load Location -</h4> <h5 style="display:inline;font-style:italic">Saves your current loaction to your browser or loads your location</h5></div>
            <div> <h4 style="text-align:left;display:inline">Map/Satellitte/Terrain Mode -</h4> <h5 style="display:inline;font-style:italic">Change the view of your map to the specified mode</h5></div>
		    <div> <h4 style="text-align:left;display:inline">Share -</h4> <h5 style="display:inline;font-style:italic">Bring up the Email Form</h5></div>
            <div> <h4 style="text-align:left;display:inline">Send -</h4> <h5 style="display:inline;font-style:italic">Send your co-ordinates via email to your chosen person</h5></div>
	</div>
    <a class="fancybox1" href ="#inline2"title="Welcome To Street Speak" onclick ="click()" style="display:none">Inline</a>

    <div id="inline2" style="width:600px;display:none;height:200px">

    <h1 style="text-align:center;text-decoration:underline;font-family:Serif;font-style:italic">Welcome to Street Speak</h1>
    <h2 style="text-align:center;font-family:Cursive;font-style:italic">To use this tool simply click on the mike and issue your instruction(s) by voice to navigate around the maps.
     For a list of valid commands say the command "Show instructions".</h2>
    </div>


    </div>
    

  
</body>
    
   <script  type ="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
   <script type="text/javascript" src="Javascript/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="Javascript/jquery.fancybox.pack.js"></script>
 
   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places,weather&sensor=false"></script>  
  
  
  
   
   <script src="Javascript/Directions.js" type="text/javascript"></script>
   <script src="Javascript/Methods.js" type="text/javascript"></script>
  
  

   
</html>
